<template>
  <div id="app">
    <el-row class="nav">
      <!-- 用ref来修改子元素type的时候vue不建议我直接修改dom-->
      <el-button :type="pagenum > -1 ? 'primary' : ''">前言</el-button>
      <el-button :type="pagenum > 0 ? 'primary' : ''">计划</el-button>
      <el-button :type="pagenum > 1 ? 'primary' : ''">1</el-button>
      <el-button :type="pagenum > 2 ? 'primary' : ''">2</el-button>
      <el-button :type="pagenum > 3 ? 'primary' : ''">3</el-button>
      <el-button :type="pagenum > 4 ? 'primary' : ''">4</el-button>
      <el-button :type="pagenum > 5 ? 'primary' : ''">5</el-button>
      <el-button :type="pagenum > 6 ? 'primary' : ''">6</el-button>
      <el-button :type="pagenum > 7 ? 'primary' : ''">7</el-button>
      <el-button :type="pagenum > 8 ? 'primary' : ''">8</el-button>
    </el-row>

    <!-- 按钮部分 -->
    <el-button-group class="pagebtn" v-if="pagenum == 1">
      <el-button type="primary" @click="nextpage()"
        >完成计划，开始解题</el-button
      >
    </el-button-group>
    <el-button-group class="pagebtn" v-if="pagenum > 1">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        @click="backpage()"
        :disabled="pagenum > 9"
        >上一页</el-button
      >
      <el-button type="primary" @click="nextpage()" :disabled="pagenum > 9"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </el-button-group>
    <!-- 提示部分 -->
    <!-- <el-button-group class="pagebtn" v-if="pagenum == 6">
      <el-button type="warning" @click="hintopen">提示</el-button>
    </el-button-group> -->
    <div class="cxt" v-if="pagenum == 0">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="felxbox">
          <img src="./assets/img/图片1.png" alt="" style="height:425px" />
        </div>
        <div class="top-picture">
          <img src="./assets/img/zhang.png" alt="" style="height:200px" />
        </div>
        <div class="top2-picture">
          <img src="./assets/img/maopao.png" alt="" style="height:130px" />
        </div>
      </div>
      <div class="rightcxt">
        <el-row type="flex" justify="center">
          <el-col :span="20" style="margin-top:200px" class="text">
            <h3 style="background-color:#409eff">
              张叔叔家要交电费了,<br />
              你可以帮他计算一下这个月应该交多少电费吗？<br />
              【你可以通过点击、输入等方式来完成题目的作答】
            </h3>
            <br />
            <div class="button1">
              <el-button
                type="primary"
                @click="nextpage()"
                class="button2"
                style="margin:50px 160px;"
                >开始答题</el-button
              >
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-show="pagenum == 1">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片1.png" alt="" style="height:425px" />
      </div>
      <div class="zheng-picture">
        <div class="top-picture">
          <img src="./assets/img/zhang.png" alt="" style="height:200px" />
        </div>
        <div class="top2-picture">
          <img src="./assets/img/maopao.png" alt="" style="height:130px" />
        </div>
      </div>

      <div class="rightcxt">
        <div class="title flexbox">
          <h2>
            计划
          </h2>
        </div>
        <div class="text flexbox" style="letter-spacing:3px">
          为了计算张叔叔家的电费，请你先计划一下解决问题的过程。<br/>
          【点击下方每一步的下拉按钮，选择每一步要做的事情。完成后，请点击“完成计划，开始解题”。】
        </div>
        <div style="font-size:36px;margin:50px 200px;">
          我的顺序：
        </div>

        <div class="answerimg">
          <Drag></Drag>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 2">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:400px" />
      </div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:225px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:225px" />
      </div>

      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第1题【单选题】</h2>
        </div>
        <div class="text flexbox">
          你收集了张叔叔所在地区的电费收费标准，并且记录了本月第一天和最后一天张叔叔家电表的示数。
          请问张叔叔家本月的用电量是多少？
        </div>
        <div class="optionbox">
          <el-radio v-model="$store.state.answer[1]" label="0" @change="updata()">
            A.1325度 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[1]" label="1" @change="updata()"
            >B.1615度</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[1]" label="2" @change="updata()">C.290度</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[1]" label="3" @change="updata()">
            D.200度
          </el-radio>
        </div>
      </div>

      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 3">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:400px" />
      </div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:225px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:225px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第2题【单选题】</h2>
        </div>
        <div class="text flexbox" style="height:100px;">
          关于计算张叔叔本月电费需要使用到的收费标准，下列哪个说法是正确的？
        </div>
        <div class="optionbox smallfont">
          <el-radio v-model="$store.state.answer[2]" label="0" @change="updata()">
            A.只需要用到其中“每度收费0.5元”这个信息 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[2]" label="1" @change="updata()"
            >B.只需要用到其中“每度收费0.6元”这个信息</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[2]" label="2" @change="updata()"
            >C.其中“每度收费0.5元”和“每度收费0.6元”<br/>两个信息均需要用到</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[2]" label="3" @change="updata()">
            D.其中“每度收费0.5元”和“每度收费0.6元”<br/>两个信息均不需要用到
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 4">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="height:400px" />
        </div>
      </div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:225px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:225px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第3题【单选题】</h2>
        </div>
        <div class="text flexbox">
          请你根据收费标准，选择出最能够体现每月电费随用电量变化趋势的图像。
        </div>
        <div class="imgoptionbox">
          <el-radio v-model="$store.state.answer[3]" label="0" border @change="updata()">
            <img src="./assets/img/选1.png" alt="" />
          </el-radio>
          <el-radio v-model="$store.state.answer[3]" label="1" border @change="updata()">
            <img src="./assets/img/选2.png" alt="" />
          </el-radio>
          <el-radio v-model="$store.state.answer[3]" label="2" border @change="updata()">
            <img src="./assets/img/选3.png" alt="" />
          </el-radio>
          <el-radio v-model="$store.state.answer[3]" label="3" border @change="updata()">
            <img src="./assets/img/选4.png" alt="" />
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 5">
      <div class="horizontalline"></div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:225px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:225px" />
      </div>
      <div class="leftcxt">
        <img src="./assets/img/图片2.png" alt="" style="height:400px" />
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第4题【单选题】</h2>
        </div>
        <div class="text flexbox">
          以下哪个表达式能够正确表示每月电费与用电量之间的关系？（y表示每月电费，x表示每月用电量）
        </div>
        <div class="optionbox">
          <div>
            <el-radio v-model="$store.state.answer[4]" label="0" @change="updata()">
              A.y=0.5x（x>0）
            </el-radio>
            <el-radio v-model="$store.state.answer[4]" label="1" @change="updata()">
              B.y=0.6x（x>0）
            </el-radio>
            <el-radio v-model="$store.state.answer[4]" label="2" @change="updata()">
              C.当0&lt;x≤200时，y=0.5x；当x>200时，y=0.6x
            </el-radio>
            <el-radio
              v-model="$store.state.answer[4]"
              label="3"
              style="height:80px;"
              @change="updata()"
            >
              D.当0&lt;x≤200时，y=0.5x；当x>200时，y=100+<br />0.6╳(x-200)
            </el-radio>
          </div>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 6">
      <div class="horizontalline"></div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:200px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:200px" />
      </div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="height:400px" />
        </div>
      </div>

      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第5题【填空题】</h2>
        </div>
        <div class="text flexbox">
          请根据你的表达式，计算一下张叔叔家本月的电费，将计算结果填写在作答框中。
          注：如结果为无限小数，仅保留一位小数。
        </div>
        <div class="flexbox">
          <Computer2 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 7">
      <div class="horizontalline"></div>
      <div class="oo">
        <img
          src="./assets/img/1325.png"
          alt=""
          style="height:225px;margin-top:-200px;"
        />
      </div>
      <div class="pp">
        <img
          src="./assets/img/1625.png"
          alt=""
          style="height:225px;margin-top:-200px;"
        />
      </div>
      <div>
        <div class="p7info">
          <el-tag style="background-color: #409EFF;">你的结果</el-tag>
          <div class="expressionbox">
            张叔叔家本月的电费= {{ $store.state.answer[5] }}（元）
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第6题【单选题】</h2>
        </div>
        <div class="text flexbox">
          如果张叔叔家所在地区的收费标准改为： <br />
          &ensp;&ensp;如果月用电量不超过100度，那么每度电收费0.4元<br />
          &ensp;&ensp;如果月用电量超过100度，那么超过部分的每度电收费0.6元<br />
          那么张叔叔家本月的电费会如何变化?
        </div>
        <div class="optionbox flexbox" style="display:block;">
          <el-radio v-model="$store.state.answer[6]" label="0" @change="updata()">
            A.张叔叔家本月的电费会增加 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[6]" label="1" @change="updata()"
            >B.张叔叔家本月的电费会减少 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[6]" label="2" @change="updata()"
            >C.张叔叔家本月的电费会不变 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[6]" label="3" @change="updata()">
            D.无法判断张叔叔家本月的电费变化
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 8">
      <div class="horizontalline"></div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:200px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:200px" />
      </div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="height:400px" />
          <div class="p7info">
            <el-tag style="background-color: #409EFF;">你的结果</el-tag>
            <div class="expressionbox">
              张叔叔家本月的电费= {{ $store.state.answer[5] }}（元）
            </div>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:30px">第7题【单选题】</h2>
        </div>
        <div class="text flexbox">
          请你思考一下，相比于“每度电收费为0.5元”
          的收费标准，你认为该地区采用这种收费标准的目的是什么？
        </div>
        <div class="optionbox flexbox" style="display:block;">
          <el-radio v-model="$store.state.answer[7]" label="0" @change="updata()">
            A.为了让所有人都多交一些电费</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[7]" label="1" @change="updata()"
            >B.为了让所有人都少交一些电费</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[7]" label="2" @change="updata()"
            >C.为了让人们可能少用一些电</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[7]" label="3" @change="updata()">
            D.体现出“用的越多，越便宜”的优惠政策
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 9">
      <div class="horizontalline"></div>
      <div class="oo">
        <img src="./assets/img/1325.png" alt="" style="height:200px" />
      </div>
      <div class="pp">
        <img src="./assets/img/1625.png" alt="" style="height:200px" />
      </div>
      <div class="leftcxt">
        <div class="flexbox">
          <img src="./assets/img/图片2.png" alt="" style="height:400px" />
          <div class="p7info">
            <el-tag style="background-color: #409EFF;">你的结果</el-tag>
            <div class="expressionbox">
              张叔叔家本月的电费= {{ $store.state.answer[5] }}（元）
            </div>
          </div>
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2 style="font-size:21px">第8题【单选题、填空题】</h2>
        </div>
        <div class="text flexbox" style="height:100px;">
          请你思考一下，相比于“每度电收费为0.5元”
          的收费标准，你认为该地区采用这种收费标准的目的是什么？
        </div>

        <div class="optionbox flexbox smallfont1" style="display:block;">
          <el-radio v-model="$store.state.answer[8]" label="0" @change="updata()">
            A.如果月用电量超过400度，那么超过部分<br/>的每度电收费0.7元</el-radio
          ><br />
          <el-radio v-model="$store.state.answer[8]" label="1" @change="updata()"
            >B.如果月用电量超过400度，那么超过部分<br/>的每度电收费0.9元</el-radio
          ><br /> 
          <el-radio v-model="$store.state.answer[8]" label="2" @change="updata()"
            >C.如果月用电量超过500度，那么超过部分<br/>的每度电收费0.7元 </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[8]" label="3" @change="updata()">
            D.如果月用电量超过500度，那么超过部分<br/>的每度电收费0.9元
          </el-radio>
          <div style="margin:10px 0px;font-size:25px;">
            我的理由是：
          </div>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="$store.state.answer[9]"
            style="font-size:20px"
          >
          </el-input>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 10">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <div class="felxbox">
          <img
            src="./assets/img/图片1.png"
            alt=""
            style="height:425px;"
            class="zuihou"
          />
        </div>
      </div>
      <div class="rightcxt">
        <el-row type="flex" justify="center">
          <div style="margin:200px 20px;width:520px;">
            <img src="./assets/img/zhang.png" alt="" style="height:250px" />
            <div class="maopao2">
              <img src="./assets/img/maopao2.png" alt="" style="height:130px" />
            </div>

         <div
              class="fontsize30 lastbtn"
              >请先点击下方的【提交答案】，再点击【进入下一题】。</div>

          </div>
        </el-row>
      </div>
      <div class="verticalline"></div>
    </div>
  </div>
</template>

<script>
import Drag from "./components/Drag";
import Computer2 from "./components/Computer2";
export default {
  name: "App",
  components: {
    Drag,
    Computer2,
  },
  data() {
    return {
      pagenum: 0, //页数
      page4answerchoose: [
        "",
        "y=0.5x",
        "y=0.6x",
        "当x≤200时，y=0.5x；当x>200时，y=0.6x",
        "当x≤200时，y=0.5x；当x>200时，y=100+0.6╳(x-200) ",
      ],
    };
  },
  methods: {
    hintopen() {
      this.$alert(
        "你可以点击屏幕上键盘的数字来进行输入，点击“删除”即可重新输入。 ",
        "提示信息",
        {
          confirmButtonText: "返回题目",
        }
      );
    },
    updata() {
      this.$store.state.pagenum=this.pagenum
      console.log(this.$store.state.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    nextpage() {
      this.pagenum += 1;
      //提示判断
      if (
        this.pagenum === 2 &&
        (this.$store.state.answer[0][0] == "-1" ||
          this.$store.state.answer[0][1] == "-1" ||
          this.$store.state.answer[0][2] == "-1" ||
          this.$store.state.answer[0][3] == "-1")
      ) {
        this.nextopen();
      } else if (
        2 < this.pagenum &&
        this.pagenum < 9 &&
        (this.$store.state.answer[this.pagenum - 2] == "" ||
          this.$store.state.answer[this.pagenum - 2] == "-1")
      ) {
        this.nextopen();
      } else if (
        this.pagenum == 9 &&
        (this.$store.state.answer[7] == "-1" ||
          this.$store.state.answer[8] == "")
      ) {
        this.nextopen();
      } else if (this.pagenum == 10) {
        if (
          this.$store.state.answer[8] == "-1" ||
          this.$store.state.answer[9] == ""
        ) {
          this.nextopen();
        } else {
          this.pagenum -= 1;
          this.notarizeopen();
        }
      }
            this.updata()
    },
    nextopen() {
      this.pagenum -= 1;
      this.$alert("这个问题你还没做完，请作答后再进入下一页吧！", "提示", {
        confirmButtonText: "确定",
      });
    },
    backpage() {
      this.pagenum -= 1;
      console.log(this.pagenum, this.$store.state.answer);
    },
    notarizeopen() {
      this.$confirm(
        "即将提交全部答案，确认无误请点击“提交全部答案”。",
        "提示",
        {
          confirmButtonText: "提交全部答案",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.pagenum += 1;
          this.$message({
            type: "success",
            message: "提交全部答案!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
  },
};
</script>

<style scope>
#app {
  line-height: 36px;
  width: 1200px;
  height: 800px;
  font-size: 20px;
  font-weight: 1000;
}
.lastbtn{
  width: 520px;
  height: 100px;
  padding: 30px;
  font-size: 36px;
   font-family: "楷体";
  position: absolute;
  top: 500px;
  left: 10px;
  background-color: #f5f7ae;
}

.bg-purple {
  width: 100px;
  height: 60px;
  background: #d3dce6;
}
.el-checkbox,
.el-checkbox__input {
  position: relative;
  white-space: nowrap;
}
.multiselect label {
  width: 250px;
  height: 60px;
  line-height: 60px;
  border: 3px solid #000;
  background-color: transparent;
}
.multiselect .el-checkbox__label {
  font-size: 18px;
  font-weight: 1000;
}
.expressionbox {
  width: 500px;
  height: 100px;
  overflow: auto;
  background-color: #409eff;
  border-color: #d9ecff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
}
.p8optionchoose label {
  display: inline;
}
.p8optionchoose .el-radio__label {
  font-size: 20px !important;
  margin-top: 10px;
}
.p8optionchoose > div {
  width: 550px;
  height: 80px;
  margin: 10px;
  padding-top: 20px;
  background-color: #99cc99;
  font-size: 20px !important;
}
.p7info {
  position: absolute;
  top: 620px;
  left: 0px;
  width: 300px;
}
.p7info span {
  border: 3px solid #000;
  margin: 3px 0px;
}
.imgoptionbox {
  width: 600px;
}
.imgoptionbox img {
  width: 200px;
  height: 200px;
}
.imgoptionbox label {
  width: 250px;
  background: transparent;
}
.el-radio.is-bordered {
  height: 220px !important;
  padding: 10px !important;
  margin: 5px !important;
}
.smallfont span {
  top: 10px;
  line-height: 30px;
}
.smallfont label{
  height: 80px;
}
.smallfont .el-radio__label{
    position: absolute;
    top:10px;
}
.smallfont1 label{
  height: 60px;
    line-height: 25px;
}
.smallfont1 span {
top:5px !important;
}

.maopao2 {
  position: absolute;
  top: 60px;
  left: 250px;
}
.btnn {
  position: absolute;
  top: 530px;
  width: 150px;
  height: 70px;
}
.zuihou {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 150px;
}
</style>
